<template>
    <div class="madp-customer-list-detail">
        <basic-container v-if="backShow">
            <el-page-header @back="goBack" content="客户详情"></el-page-header>
        </basic-container>
        <el-backtop target=".madp-customer-list-detail" :bottom="100" :right="100">
            <div class="madp-up-top" :visibility-height="50">UP</div>
        </el-backtop>
        <basic-container :class="{ 'madp-new-container': isComponent }">
            <el-row>
                <el-col :span="3">
                    <div class="img">
                        <img :src="infoDetail.avatar" @error="notFind" alt />
                    </div>
                    <div class="name">{{ infoDetail.name }}</div>
                    <div class="weixin">
                        <i v-if="infoDetail.gender === 1" class="el-icon-male" />
                        <i v-if="infoDetail.gender === 2" class="el-icon-female" />
                        <span>@{{ infoDetail.typeText }}</span>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="madp-data-box">
                        <ul class="madp-customer-data">
                            <li>
                                <p class="madp-title-props">备注名称:</p>
                                <span v-if="infoDetail.remark && infoDetail.remark !== ''">{{ infoDetail.remark }}</span>
                                <span v-else>无</span>
                                <i class="el-icon-edit" @click="openRemark(infoDetail.remark)" />
                            </li>
                            <li class="madp-tag">
                                <p class="madp-title-props">标签:</p>
                                <div v-if="infoDetail.tag && infoDetail.tag.length !== 0">
                                    <el-tag type="primary" class="madp-tag-margin" disable-transitions v-for="(item, index) in infoDetail.tag" :key="index">{{ item.tagName }}</el-tag>
                                </div>
                                <span v-else>无</span>
                                <i class="el-icon-edit" @click="onEditTags" />
                            </li>
                            <li>
                                <p class="madp-title-props">描述:</p>
                                <span v-if="infoDetail.description && infoDetail.description !== ''">
                                    <span v-if="infoDetail.description.length < 21">{{ infoDetail.description }}</span>
                                    <el-popover v-else placement="top-start" width="200" trigger="hover" :content="infoDetail.description">
                                        <span slot="reference">{{ infoDetail.description.slice(0, 20) + '...' }}</span>
                                    </el-popover>
                                </span>
                                <span v-else>无</span>
                                <i class="el-icon-edit" @click="openDescribe(infoDetail.description)" />
                            </li>
                            <li>
                                <p class="madp-title-props">客户号:</p>
                                <span v-if="infoDetail.businessNo !== ''">
                                    {{ infoDetail.businessNo }}
                                </span>
                                <span v-else>无</span>
                                <i class="el-icon-edit" @click="openBusinessNo(infoDetail.businessNo)" />
                            </li>
                        </ul>
                    </div>
                    <el-dialog :visible.sync="remarkModal" title="修改备注" :close-on-click-modal="false">
                        <el-input v-model.trim="remark" :maxLength="20" placeholder="非必输，最多20个字符" />
                        <template slot="footer">
                            <el-button
                                @click="
                                    () => {
                                        this.remark = this.infoDetail.remark;
                                        this.remarkModal = false;
                                    }
                                "
                                >取消</el-button
                            >
                            <el-button type="primary" @click="editRemark">确定</el-button>
                        </template>
                    </el-dialog>
                    <el-dialog :visible.sync="descriptionModal" title="修改描述" :close-on-click-modal="false">
                        <el-input type="textarea" v-model="description" placeholder="非必输，最多150个字符" :rows="5" :maxLength="150" />
                        <template slot="footer">
                            <el-button
                                @click="
                                    () => {
                                        this.description = this.infoDetail.description;
                                        this.descriptionModal = false;
                                    }
                                "
                                >取消</el-button
                            >
                            <el-button type="primary" @click="editDescription">确定</el-button>
                        </template>
                    </el-dialog>
                    <el-dialog :visible.sync="businessNoModal" title="客户号" :close-on-click-modal="false">
                        <el-input
                            v-model.trim="businessNo"
                            placeholder="非必输，且不由企业微信维护，平台自行维护，只能输入数字"
                            @keyup.native="businessNo = businessNo.replace(/[^\d]/g, '')"
                            @afterpaste.native="businessNo = businessNo.replace(/[^\d]/g, '')"
                            maxlength="10"
                            show-word-limit
                        />
                        <template slot="footer">
                            <el-button
                                @click="
                                    () => {
                                        this.businessNo = this.infoDetail.businessNo;
                                        this.businessNoModal = false;
                                    }
                                "
                                >取消</el-button
                            >
                            <el-button type="primary" @click="editBusinessNo">确定</el-button>
                        </template>
                    </el-dialog>
                    <el-dialog :visible.sync="allTagModal" title="为筛选的客户增加标签" :before-close="closeTagDialog" :close-on-click-modal="false">
                        <div class="madp-code-tags">
                            <div class="madp-code-tags-group" v-for="allItem in tagList" :key="allItem.groupId">
                                <div class="madp-code-tags-group-text">{{ allItem.groupName }}:</div>
                                <div class="madp-code-tags-group-tags">
                                    <el-tag color="#ffffff" :style="{ color: '#000000' }" @click="onEditNewTag(allItem.groupId)">+ 添加标签</el-tag>
                                    <el-input
                                        v-if="tagIndex === allItem.groupId"
                                        maxlength="15"
                                        v-model.trim="newTagName"
                                        ref="newTagInput"
                                        @keyup.enter.native="onSubmitNewTag()"
                                        @blur="onSubmitNewTag"
                                        @input="newTagName = newTagName.replace(/\s+/, '')"
                                        placeholder="输入后回车"
                                    ></el-input>
                                    <el-tag
                                        v-for="it in allItem.tagNameList"
                                        :key="it.id"
                                        :color="selectedTagsKeys.includes(it.id) ? theme : '#ffffff'"
                                        :style="selectedTagsKeys.includes(it.id) ? 'color: #ffffff' : 'color: #000000'"
                                        @click="onSelectedTags(allItem, it)"
                                        >{{ it.name }}</el-tag
                                    >
                                </div>
                            </div>
                            <div slot="footer">
                                <div class="madp-code-tags-footer">
                                    <div>
                                        <el-button
                                            type="text"
                                            :loading="tagsEditLoading"
                                            @click="
                                                newCstTagVisible = true;
                                                tagsVisibleShow = false;
                                            "
                                            >+ 添加标签组</el-button
                                        >
                                    </div>
                                    <div>
                                        <el-button :loading="tagsEditLoading" @click="onTagsCancel">取消</el-button>
                                        <el-button type="primary" :loading="tagsEditLoading" @click="onTagsSure()">确定</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-dialog>
                    <!-- 新建/修改 标签组 -->
                    <el-dialog
                        title="新建标签组"
                        :visible.sync="newCstTagVisible"
                        @close="
                            newCstTagVisible = false;
                            tagsVisibleShow = true;
                            cstTags = [];
                        "
                        width="700px"
                        :close-on-click-modal="false"
                    >
                        <div class="code-new-tag-group">
                            <el-form ref="tagGroupForm" v-model="tagGroupForm">
                                <el-form-item label="标签组名称:" prop="groupName" label-width="18%">
                                    <el-input
                                        v-model.trim="tagGroupForm.groupName"
                                        class="madp-add"
                                        placeholder="请输入标签组名称"
                                        maxlength="15"
                                        @input="tagGroupForm.groupName = tagGroupForm.groupName.replace(/\s+/, '')"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="标签名称:" prop="tagName" label-width="18%">
                                    <el-input
                                        placeholder="请输入标签名，按回车完成，多个标签用‘，’（中文逗号）隔开"
                                        v-model.trim="tagGroupForm.tagName"
                                        @keyup.enter.native="handleInputConfirm('tagGroupForm', 'tagName')"
                                        @input="tagGroupForm.tagName = tagGroupForm.tagName.replace(/\s+/, '')"
                                    ></el-input>
                                    <div v-if="cstTags && cstTags.length > 0">
                                        <el-tag v-for="(tag, index) in cstTags" :key="index" closable :disable-transitions="false" @close="handleTagClose(tag)">{{ tag }}</el-tag>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div slot="footer">
                            <el-button
                                :loading="newCstTagLoading"
                                @click="
                                    newCstTagVisible = false;
                                    tagsVisibleShow = true;
                                    cstTags = [];
                                "
                                >取消</el-button
                            >
                            <el-button type="primary" @click="onSubmitNewTagGroup" :loading="newCstTagLoading">确定</el-button>
                        </div>
                    </el-dialog>
                </el-col>
            </el-row>
            <div class="madp-customer">
                <div class="madp-two">
                    <h3>所在群</h3>
                    <div v-if="infoDetail.roomName && infoDetail.roomName.length !== 0">
                        <span v-for="(item, val) in infoDetail.roomName" :key="val">{{ item }}</span>
                    </div>
                    <span v-else>无</span>
                </div>
                <div>
                    <h3>归属企业成员</h3>
                    <div v-for="item in infoDetail.employeeName" :key="item">{{ item }}</div>
                </div>
            </div>
            <el-tabs type="card" v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="互动轨迹" name="first"></el-tab-pane>
                <el-tab-pane label="用户画像" name="second"></el-tab-pane>
            </el-tabs>
            <div v-if="activeName === 'first'">
                <div class="madp-pane-wrapper">
                    <el-timeline>
                        <el-timeline-item :color="theme" v-for="item in trackList" :key="item.id">
                            {{ item.createTime }}
                            <p class="madp-pane-color">{{ item.content }}</p>
                        </el-timeline-item>
                    </el-timeline>
                    <div class="madp-track-page">
                        <el-button @click="getMoreList" v-if="isMoreShow">加载更多</el-button>
                        <span v-else>没有更多了</span>
                    </div>
                </div>
            </div>
            <div v-if="activeName === 'second'">
                <div class="madp-btn-box">
                    <div v-if="editPivotDis">
                        <el-button style="marginright: 10px" @click="reset">取消</el-button>
                        <el-button type="primary" @click="editPivot">提交</el-button>
                    </div>
                    <el-button
                        v-else
                        type="primary"
                        @click="
                            () => {
                                this.editPivotDis = true;
                            }
                        "
                        >编辑</el-button
                    >
                </div>
                <div class="madp-portrait">
                    <div class="madp-box-list" v-for="portraitItem in portraitList" :key="portraitItem.contactFieldId">
                        <el-tag class="madp-tag-margin">{{ portraitItem.name }}</el-tag>
                        <!-- 编辑状态 -->
                        <div v-if="editPivotDis">
                            <el-radio-group v-if="portraitItem.type === 2" v-model="portraitItem.value">
                                <el-radio v-for="(optionItem, index) in portraitItem.options" :key="index" :label="optionItem" :value="optionItem"></el-radio>
                            </el-radio-group>
                            <el-checkbox-group v-else-if="portraitItem.type === 3" v-model="portraitItem.value">
                                <el-checkbox v-for="(optionItem, index) in portraitItem.options" :key="index" :label="optionItem"></el-checkbox>
                            </el-checkbox-group>
                            <el-select v-else-if="portraitItem.type === 4" v-model="portraitItem.value">
                                <el-option v-for="(optionItem, index) in portraitItem.options" :key="index" :value="optionItem" :label="optionItem"></el-option>
                            </el-select>
                            <div class="madp-date-wrap" v-else-if="portraitItem.type === 5">
                                <el-date-picker class="madp-edit-input" v-model="portraitItem.value" type="date" value-format="yyyy-MM-dd" :clearable="false" placeholder="请选择日期"></el-date-picker>
                            </div>
                            <el-upload
                                v-else-if="portraitItem.type === 8"
                                class="madp-edit-input"
                                :headers="headers"
                                accept="image/jpg, image/jpeg, image/png, image/gif"
                                action="/admin/sys-file/upload"
                                :show-file-list="false"
                                :on-success="(res) => handleAvatarSuccess(res, portraitItem)"
                            >
                                <img v-if="portraitItem.value" :src="portraitItem.value" class="madp-edit-avatar" />
                                <i v-else class="el-icon-plus madp-edit-avatar-icon"></i>
                            </el-upload>
                            <div class="madp-date-wrap" v-else-if="portraitItem.type === 11">
                                <el-date-picker
                                    class="madp-edit-input"
                                    v-model="portraitItem.value"
                                    type="date"
                                    :picker-options="pickerOptions"
                                    value-format="yyyy-MM-dd"
                                    :clearable="false"
                                    placeholder="请选择日期"
                                ></el-date-picker>
                            </div>
                            <el-input class="madp-edit-input" v-model.trim="portraitItem.value" :placeholder="placeholderObj[portraitItem.type]" @blur="checkAndSetVal(portraitItem)" v-else></el-input>
                        </div>
                        <!-- 展示 -->
                        <div v-else>
                            <span v-if="portraitItem.value === ''">无</span>
                            <img v-else-if="portraitItem.type === 8 && portraitItem.value" :src="portraitItem.value" class="madp-edit-avatar" />
                            <span v-else-if="portraitItem.type === 3 && portraitItem.value.length !== 0">
                                {{ Array.isArray(portraitItem.value) ? portraitItem.value.join(',') : portraitItem.value }}
                            </span>
                            <span v-else>{{ portraitItem.value }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </basic-container>
    </div>
</template>

<script>
import { synDetail, synTrack, setFieldpivot, getFieldpivot, editSynDetail, getTagGroupList } from '@/api/madp-customer/madp-customer';
import { addLabel } from '@/api/customer/customer-label';
import { createTagGroup, createTagByTagGroupId } from '@/api/channel-code/channel-code';
import store from '@/store';
import { mapGetters } from 'vuex';
export default {
    name: 'customerDetail',
    props: {
        detailMsg: {
            type: Object,
            default: () => {
                return {};
            }
        },
        backShow: {
            type: Boolean,
            default: true
        },
        isComponent: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 标签tags
            cstTags: [],
            // 表单数据
            tagGroupForm: {
                groupId: '',
                groupName: '',
                tagName: ''
            },
            // loading开关
            newCstTagLoading: false,
            // 弹窗开关
            newCstTagVisible: false,
            newTagName: '', // 标签名字
            selectedTags: [], // 查询tags
            selectedTagsKeys: [], // tags key
            tagIndex: undefined, // tag index
            tagsEditLoading: false, // loading开关
            tagsVisible: false,
            tagsVisibleShow: false, // 弹窗开关
            tagList: [], // tags 数组
            tagData: [], // tag数据
            // 详情信息
            infoDetail: {
                employeeName: [],
                avatar: '',
                tag: [],
                type: '1',
                tagNameList: [] // 设置的客户标签
            },
            // 选项卡显示条件
            activeName: 'first',
            contactId: '',
            // 成员id
            employeeId: '',
            // 弹窗开关
            remarkModal: false,
            // 弹窗开关
            descriptionModal: false,
            // 弹窗开关
            businessNoModal: false,
            // 用户画像列表
            portraitList: [],
            checklist: [],
            // 备注
            remark: '',
            description: '',
            businessNo: '',
            // 用户画像编辑控制
            editPivotDis: false,
            allTagModal: false,
            groupId: '',
            tagCheckboxList: [],
            allTagList: [],
            //日期禁用
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            headers: {
                Authorization: 'Bearer ' + store.getters.access_token
            },
            placeholderObj: {
                6: '请输入邮箱，如xxx@xx.com',
                7: '请输入手机号',
                9: '请输入1-120范围内的数字值',
                10: '请输入QQ号，5-11位'
            },
            // 图片上传展示
            trackList: [],
            // 分页
            trackPage: {
                current: 1,
                size: 10,
                total: 0
            },
            // 校验规则
            phoneRule: true,
            emailRule: true,
            QQRule: true,
            ageRule: true,
            isMoreShow: false
        };
    },
    computed: {
        ...mapGetters(['theme'])
    },
    watch: {
        checklist(nval, oval) {
            if (nval.length > oval.length) {
                let newArr = this.tagData.filter((item) => this.checklist[this.checklist.length - 1] === item.id);
                this.infoDetail.tag.push({
                    tagId: newArr[0].id,
                    tagName: newArr[0].name
                });
            }

            if (nval.length < oval.length) {
                let current = 0;
                oval.forEach((element, index) => {
                    if (nval.indexOf(element) < 0) {
                        current = index;
                        return;
                    }
                });
                this.infoDetail.tag.splice(current, 1);
            }
        }
    },
    mounted() {
        this.getTagList();
        this.getSynDetail();
        this.getSynTrack();
        this.getPortrait();
    },
    methods: {
        notFind(e) {
            if (this.infoDetail.avatar) {
                const imgUrl = this.infoDetail.gender === 1 ? '/img/male.png' : '/img/female.png';
                e.target.src = imgUrl;
            }
        },
        // 返回
        goBack() {
            this.$emit('goBack');
        },
        // 获取客户详情
        getSynDetail() {
            let data = {
                employeeId: this.detailMsg.employeeId,
                contactId: this.detailMsg.contactId
            };
            synDetail(data).then((res) => {
                if (res.data.code === 0) {
                    this.infoDetail = res.data.data;
                    if (res.data.data.employeeName) {
                        this.infoDetail.employeeName = res.data.data.employeeName.map((item) => {
                            if (item) {
                                return item;
                            }
                        });
                    }
                }
            });
        },
        // 切换互动轨迹和用户画像
        handleTabClick(tab, event) {
            if (this.activeName === 'second') {
                this.portraitList = [];
                this.getPortrait();
            } else {
                this.trackPage.current = 1;
                this.getSynTrack();
            }
        },
        // 获取客户互动轨迹
        getSynTrack() {
            let data = {
                contactId: this.detailMsg.contactId,
                employeeId: this.detailMsg.employeeId,
                current: this.trackPage.current,
                size: this.trackPage.size
            };
            synTrack(data).then((res) => {
                if (res.data && res.data.code === 0) {
                    let { records, pages, current, size, total } = res.data.data;
                    if (current === 1) {
                        this.trackList = [].concat(records);
                    } else {
                        this.trackList = this.trackList.concat(records);
                    }

                    this.trackPage = {
                        pages,
                        current,
                        size,
                        total
                    };
                    if (current < pages) {
                        this.isMoreShow = true;
                    } else {
                        this.isMoreShow = false;
                    }
                }
            });
        },
        // 获取更多
        getMoreList() {
            this.trackPage.current += 1;
            this.getSynTrack();
        },
        // 获取用户画像
        getPortrait() {
            getFieldpivot(this.detailMsg.contactId).then((res) => {
                if (res.data && res.data.data && res.data.code === 0) {
                    this.portraitList = res.data.data;
                    this.portraitList.map((item) => {
                        item['originValue'] = item.value;
                        item['status'] = 0;
                    });
                    this.editPivotDis = false;
                }
            });
        },
        // 编辑用户画像开始
        handleAvatarSuccess(res, portraitItem) {
            if (res.code === 0) {
                this.$nextTick(() => {
                    portraitItem.value = res.data.url;
                });
            }
        },
        // 校验
        checkAndSetVal(portraitItem) {
            let { type } = portraitItem;

            let fieldValue = portraitItem.value;
            let regStr = '';
            if (type === 6) {
                // email
                if (portraitItem.value) {
                    regStr = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
                    if (!regStr.test(fieldValue)) {
                        this.emailRule = false;
                    } else {
                        this.emailRule = true;
                    }
                } else {
                    this.emailRule = true;
                }
            } else if (type === 7) {
                // phoneNumber
                if (portraitItem.value) {
                    regStr = /^1[0-9]{10}$/;
                    if (!regStr.test(fieldValue)) {
                        this.phoneRule = false;
                    } else {
                        this.phoneRule = true;
                    }
                } else {
                    this.phoneRule = true;
                }
            } else if (type === 9) {
                // age
                if (portraitItem.value) {
                    regStr = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
                    if (!regStr.test(fieldValue)) {
                        this.ageRule = false;
                    } else {
                        this.ageRule = true;
                    }
                } else {
                    this.ageRule = true;
                }
            } else if (type === 10) {
                // type===10 QQ
                if (portraitItem.value) {
                    regStr = /^[1-9][0-9]{4,10}$/;
                    if (!regStr.test(fieldValue)) {
                        this.QQRule = false;
                    } else {
                        this.QQRule = true;
                    }
                } else {
                    this.QQRule = true;
                }
            }
        },
        // 校验
        editPivot() {
            if (!this.phoneRule) {
                this.$message.error('请输入正确的手机号！');
            } else if (!this.emailRule) {
                this.$message.error('请输入正确的邮箱！');
            } else if (!this.QQRule) {
                this.$message.error('请输入正确的QQ号！');
            } else if (!this.ageRule) {
                this.$message.error('请输入正确的年龄！');
            } else {
                this.portraitList.map((item) => {
                    if (item.value !== item.originValue) {
                        item.status = 1;
                    }
                    delete item.originValue;
                });

                setFieldpivot({
                    employeeId: this.detailMsg.employeeId,
                    contactId: this.detailMsg.contactId,
                    userPortrait: JSON.stringify(this.portraitList)
                }).then((res) => {
                    if (res.data && res.data.code === 0) {
                        this.getPortrait();
                        this.editPivotDis = false;
                    }
                });
            }
        },
        openRemark(row) {
            this.remarkModal = true;
            this.remark = row;
        },
        // 修改备注
        editRemark() {
            editSynDetail(
                {
                    contactId: this.detailMsg.contactId,
                    remark: this.remark
                },
                { employeeId: this.detailMsg.employeeId }
            ).then((res) => {
                this.remarkModal = false;
                this.getSynDetail();
                this.getSynTrack();
            });
            this.infoDetail.remark = this.remark;
            this.remarkModal = false;
        },
        // 修改描述
        editDescription() {
            editSynDetail(
                {
                    contactId: this.detailMsg.contactId,
                    description: this.description
                },
                { employeeId: this.detailMsg.employeeId }
            ).then((res) => {
                this.descriptionModal = false;
                this.getSynDetail();
                this.getSynTrack();
            });
            this.infoDetail.description = this.description;
            this.descriptionModal = false;
        },
        // 打开详情
        openBusinessNo(row) {
            this.businessNoModal = true;
            this.businessNo = JSON.parse(JSON.stringify(row));
        },
        // 关闭弹窗
        closeTagDialog() {
            this.allTagModal = false;
            this.getSynDetail();
        },
        // 修改客户编号
        editBusinessNo() {
            if (!this.businessNo) {
                this.$message.error('请输入内容！');
            } else {
                editSynDetail(
                    {
                        contactId: this.detailMsg.contactId,
                        businessNo: this.businessNo
                    },
                    { employeeId: this.detailMsg.employeeId }
                ).then((res) => {
                    this.businessNoModal = false;
                    this.getSynDetail();
                    this.getSynTrack();
                });
                this.infoDetail.businessNo = this.businessNo;
                this.businessNoModal = false;
            }
        },
        // 打开描述
        openDescribe(row) {
            this.descriptionModal = true;
            this.description = row;
        },
        // 获取客户标签组及标签
        getTagList() {
            getTagGroupList()
                .then((res) => {
                    if (res.data.code === 0) {
                        this.tagList = res.data.data;
                    }
                })
                .catch(() => {});
        },
        // 取消
        reset() {
            this.editPivotDis = false;
            this.portraitList = this.editPortraitList;
            this.getPortrait();
        },
        // 打开客户标签选择弹框，若已有选中标签，将选中标签赋值给弹框中对应字段，以便回显及操作
        onEditTags() {
            this.allTagModal = true;
            // this.getAllTag();
            if (this.infoDetail.tag && this.infoDetail.tag.length > 0) {
                this.selectedTags = this.infoDetail.tag.map((item) => ({
                    ...item,
                    id: item.tagId
                }));
                this.selectedTagsKeys = this.infoDetail.tag.map((item) => item.tagId);
            }
            this.tagsVisible = true;
            this.tagsVisibleShow = true;
        },
        // 客户标签弹框中标签的选中及取消
        onSelectedTags(allItem, records) {
            const index = this.selectedTagsKeys.findIndex((item) => item === records.id);
            if (index > -1) {
                this.selectedTagsKeys.splice(index, 1);
                this.selectedTags.splice(index, 1);
            } else {
                this.selectedTags.push(records);
                this.selectedTagsKeys.push(records.id);
            }
        },
        // 客户标签弹框中确认按钮操作，并清空弹框中的操作痕迹
        onTagsSure() {
            let arr = [],
                arrId = [];
            this.tagList.map((item) => {
                item.tagNameList.map((it) => {
                    if (this.selectedTagsKeys.includes(it.id)) {
                        const groupIndex = arrId.findIndex((id) => id === item.groupId);
                        if (groupIndex > -1) {
                            arr[groupIndex].tagNameList.push(JSON.parse(JSON.stringify(it)));
                        } else {
                            arrId.push(item.groupId);
                            arr.push({
                                ...item,
                                tagNameList: [JSON.parse(JSON.stringify(it))]
                            });
                        }
                    }
                });
            });
            let dto = {
                contactId: this.detailMsg.contactId,
                employeeId: this.detailMsg.employeeId,
                tagList: arr
            };
            addLabel(dto).then((res) => {
                if (res.data.code === 0) {
                    this.getSynDetail();
                }
            });
            this.$nextTick(() => {
                this.allTagModal = false;
                this.selectedTags = [];
                this.selectedTagsKeys = [];
            });
        },
        onTagsCancel() {
            this.allTagModal = false;
            this.selectedTags = [];
            this.selectedTagsKeys = [];
        },
        // 添加标签
        onEditNewTag(groupId) {
            this.tagIndex = groupId;
            this.$nextTick(() => {
                if (this.$refs.newTagInput) {
                    this.$refs.newTagInput[0].focus();
                }
            });
        },
        // 新建标签
        onSubmitNewTag(e) {
            if (this.newTagName) {
                createTagByTagGroupId({
                    groupId: this.tagIndex,
                    tagNameList: [this.newTagName]
                })
                    .then((res) => {
                        if (res.data.code === 0) {
                            this.getTagList();
                        }
                    })
                    .then(() => {
                        this.newCstTagVisible = false;
                        this.tagsVisibleShow = true;
                        this.newTagName = '';
                        this.tagIndex = undefined;
                    });
            } else {
                if (e) {
                    this.newCstTagVisible = false;
                    this.tagsVisibleShow = true;
                    this.newTagName = '';
                    this.tagIndex = undefined;
                }
            }
        },
        // 添加标签分组
        onSubmitNewTagGroup() {
            if (!this.tagGroupForm.groupName) {
                this.$message.error('请输入标签组名称');
                return;
            }
            this.newCstTagLoading = true;
            const tagNameList = [...new Set((this.tagGroupForm.tagName ? this.tagGroupForm.tagName.split('，') : []).concat(this.cstTags))];
            if (!tagNameList || tagNameList.length === 0) {
                this.$message.error('请输入标签名称');
                return;
            }
            let flag = false;
            tagNameList.map((item, index) => {
                if (item.length > 15) {
                    this.$message.error('标签名称最多15个字');
                    falg = true;
                }
            });
            if (flag) {
                return;
            }
            createTagGroup({
                groupName: this.tagGroupForm.groupName,
                tagNameList
            })
                .then((res) => {
                    if (res.data.code === 0) {
                        this.getTagList();
                    }
                })
                .then(() => {
                    this.tagGroupForm = {};
                    this.newCstTagVisible = false;
                    this.tagsVisibleShow = true;
                    this.newCstTagLoading = false;
                })
                .catch(() => {
                    this.newCstTagLoading = false;
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-customer-list-detail {
    height: calc(100% - 20px);
    padding-bottom: 0;
    overflow: auto;
    .img {
        width: 150px;
        height: 150px;
        img {
            border-radius: 50%;
            width: 100%;
            height: auto;
        }
    }
    .name {
        padding: 10px;
        width: 150px;
        text-align: center;
    }
    .weixin {
        width: 150px;
        text-align: center;
        span {
            margin-top: 8px;
            color: #1dce7b;
            margin-right: 10px;
        }
    }
    .madp-title-props {
        font-weight: bold;
        margin-right: 20px;
    }
    .madp-tag-margin {
        margin-right: 20px;
    }
    .el-icon-edit {
        height: 35px;
        line-height: 35px;
        cursor: pointer;
    }
    .madp-data-box {
        width: 100%;
        margin-left: 40px;

        .madp-customer-data {
            padding: 0;
            li {
                height: 35px;
                line-height: 35px;
                display: flex;
                span {
                    margin-right: 10px;
                }
                .anticon {
                    margin-top: 10px;
                }
            }
            .madp-tag {
                height: auto;
                display: flex;
                p {
                    width: 65px;
                    margin: 0;
                }
            }
        }
    }
    .madp-pane-wrapper {
        padding: 10px;
        .el-timeline-item {
            padding-bottom: 0;
        }
    }
    .madp-customer {
        width: 100%;
        height: auto;
        display: flex;
        background: #f2f2f2;
        border: 1px solid #e5e5e5;
        margin-bottom: 20px;
        div {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
            h3 {
                font-weight: 800;
                margin-bottom: 15px;
            }
            p {
                text-align: center;
                overflow-y: scroll;
                margin: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
        .madp-two {
            border-right: 1px solid #e5e5e5;
        }
    }
    .madp-btn-box {
        width: 200px;
        float: right;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-end;
    }
    .madp-portrait {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        .madp-box-list {
            width: 50%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #dbdbdb;
            padding: 10px 30px;
            .ant-input {
                width: 200px;
            }
            .avatar-uploader {
                width: 20%;
            }
            /deep/ .el-input {
                width: 200px;
            }
            /deep/ .madp-edit-input .el-upload {
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #f2f2f2;
                border-radius: 4px;
                margin: 0 0 0 10px;
                .madp-edit-avatar-icon {
                    font-size: 20px;
                    color: #b5b5b5;
                }
            }
            .madp-edit-avatar {
                display: flex;
                align-items: center;
                width: 50px;
                border-radius: 4px;
            }
        }
    }
}
.madp-track-page {
    display: flex;
    justify-content: center;
}
.madp-up-top {
    height: 100%;
    width: 100%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    text-align: center;
    line-height: 40px;
    color: #1989fa;
}
.madp-code-tags {
    &-group {
        margin-top: 10px;
        &-text {
            color: #999999;
        }
        &-tags {
            .el-button {
                margin-right: 5px;
            }
            .el-tag {
                cursor: pointer;
                user-select: none;
                margin-right: 5px;
            }
            /deep/ .el-input {
                width: 100px;
                margin-right: 5px;
                input {
                    height: 28px;
                    line-height: 28px;
                }
            }
        }
    }
}
.madp-code-tags-footer {
    display: flex;
    justify-content: space-between;
}
.madp-new-container {
    padding: 0;
}
.madp-pane-color {
    background: #eee;
    padding: 10px;
}
</style>
